import Phaser from 'phaser';

import UtilsCoordinateConter from '../../../utils/Utils.coordinate.conter/UtilsCoordinateConter';
import SaveSceneExampleQueue from '../../../utils/Utils.SaveSceneExampleQueue/UtilsSaveSceneExampleQueue';
import { TypedShell } from '../../../utils/Utils.SingletonShell/UtilsSingletonShell';

export default class SceneUiDom extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneUiDom'
        });

        this.inputDom = null;
        this.textFrameDom = null;
        this.typed = null;
        this.textOptions = null;
        this.textFrameDomVis = false;
        this.warnLeft = null;
        this.warnRight = null;
        this.warnTop = null;
        this.warnLeftVis = false;
        this.warnRightVis = false;
        this.warnTopVis = false;

        this.WWC = UtilsCoordinateConter.coordinatrConter('world').WWC;
        this.WHC = UtilsCoordinateConter.coordinatrConter('world').WHC;
        this.WFW = UtilsCoordinateConter.coordinatrConter('worldFull').WFW;
        this.WFH = UtilsCoordinateConter.coordinatrConter('worldFull').WFH;
        this.VWC = UtilsCoordinateConter.coordinatrConter('view').VWC;
        this.VHC = UtilsCoordinateConter.coordinatrConter('view').VHC;
        this.VFW = UtilsCoordinateConter.coordinatrConter('viewFull').VFW;
        this.VFH = UtilsCoordinateConter.coordinatrConter('viewFull').VFH;
    }

    init() {
        console.log('SceneUiDom init!');

        SaveSceneExampleQueue.enQueue({
            'SceneUiDom': this
        });
    }

    preload() {
        console.log('SceneUiDom pre!');

    }

    create() {
        console.log('SceneUiDom create!');

        this.inputDom = this.add.dom(60, this.VFH - 20, document.getElementById('games-input'), "opacity: 1; width: 100px; height: 20px;");

        this.textFrameDom = this.add.dom(this.VWC, this.VHC - 140, document.getElementById('text'), "opacity: 1; width: 190px; color: #FF00FF; letter-spacing: 4px;")
        .setVisible(this.textFrameDomVis);

        this.warnLeft = this.add.dom(5, this.VHC, document.getElementById('warn-left'), `opacity: 1; height: ${this.VFH}`)
        .setVisible(this.warnLeftVis);
        this.warnRight = this.add.dom(this.VFW - 5, this.VHC, document.getElementById('warn-right'), `opacity: 1; height: ${this.VFH}`)
        .setVisible(this.warnRightVis);
        this.warnTop = this.add.dom(this.VWC, 5, document.getElementById('warn-top'), `opacity: 1; width: ${this.VFW}`)
        .setVisible(this.warnTopVis);

    }

    openTextFrameDom() {
        this.textOptions = {
            strings: [
              '基于Phaser3，从 0 - 1，把简单，粗暴，纯粹，干出来四大理念打造个人独立H5移动端RPG游戏引擎插件并向往开放世界为核心。内置客户端与服务端交互用于Demo框架，几十种已封RPG装游戏中常用的功能。代码奔放在外的裸漏感，直接拔插式集成到你的任何H5项目中，随时随地抒写你的故事。美术素材资源来自网络，仅供大家学习交流讨论使用，严禁商业用途！'
            ]
        }

        TypedShell.init('textOptions', this);

    }

}